www.gusucode.com > 优米通用CSS样式库(umi.css) v1.5.1源码程序 > 优米通用CSS样式库(umi.css) v1.5.1/umi.v1.5.1.css/umi.v1.5.1.css
/* 优米CSS点缀样式库 umi.css 解决web前端页面布局的最后一里路。在对web页面排版布局时,经常有琐碎的细节要自己另外写样式,优米CSS样式库将最常用的碎片样式整合起来,交统一了样式命名规则。可将umi.css理解为点缀样式库。 简单、易记、通用,是优米CSS样式库的设计风格,您可以应用在任何类型的Web项目中,并兼容所有版本的浏览器。 优米CSS免费开源,没有商业用途限制。 Copyright (c) 2018 苏州华米软件 (http://hua-mi.cn) Licensed under the MIT License (LICENSE.txt). */ /*umi.css v1.5.1: 增加以下组件样式。radio/checkbox的两种美化风格。 */ /*.cc_radio, .cc_check { margin: 20px 20px 0 0; display: inline-block; }*/ /*IE10才有效,但不影响使用。*/ @keyframes hover-color { from { border-color: #c0c0c0; } to { border-color: #57ad68; } } .cc_radio input, .cc_check input { display: none; } .cc_radio span, .cc_check span { position: relative; display: block; padding-left: 30px; cursor: pointer; vertical-align: middle; } .cc_radio input + span:hover:before, .cc_check input + span:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color; } .cc_radio span:before, .cc_check span:before { box-sizing: content-box; position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0; } .cc_radio span:after, .cc_check span:after { box-sizing: content-box; position: absolute; display: none; content: ''; } .cc_radio input[disabled] + span, .cc_check input[disabled] + span { cursor: not-allowed; opacity: 0.5; filter: alpha(opacity=50); } .cc_radio input[disabled] + span:hover:before, .cc_check input[disabled] + span:hover:before { animation-name: none; } .cc_radio input:checked + span:before, .cc_check input:checked + span:before { animation-name: none; } .cc_radio input:checked + span:after, .cc_check input:checked + span:after { display: block; } .cc_radio span:before { border-radius: 50%; } .cc_radio span:after { top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: #57ad68; } .cc_radio input:checked + span:before { border: 1px solid #57ad68; } .cc_radio input:checked[disabled] + span:before { border: 1px solid #89ad89; } .cc_radio input:checked[disabled] + span:after { background: #89ad89; } .cc_check input + span:before { border-radius: 3px; } .cc_check input + span:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; } .cc_check input:checked + span:before { border-style: none; background: #57ad68; } .cc_radio_style2 input:checked + span:before, .cc_check_style2 input:checked + span:before { border: 1px solid #57ad68; background-color: #fff; } .cc_radio_style2 input:checked + span:after { border-radius: 100%; } .cc_check_style2 input:checked + span:after { border-radius: 0; } .cc_radio_style2 input:checked + span:after, .cc_check_style2 input:checked + span:after { transform: rotate(0); background-color: #57ad68; } .cc_radio_style2 input:checked + span:after { height: 12px; width: 12px; top: 5px; left: 5px; } .cc_check_style2 input:checked + span:after { height: 14px; width: 14px; top: 5px; left: 5px; } /*umi.css v1.5.0: 增加新样式规则,后缀有_all的样式,表示所有子元素都应用此样式。 */ /*umi.css v1.4.2 增加以下样式。 */ .c_vert_midd_all * { vertical-align: middle !important; } .c_block { display: block !important; } /*umi.css v1.4.1*/ /*元素框的类型*/ .c_inline_b { display: inline-block !important; } .c_table_cell { display: table-cell; } .c_none { display: none; } .c_absolute { position: absolute; } .c_relative { position: relative; } /*圆角*/ .c_radi_2 { border-radius: 2px !important; } .c_radi_4 { border-radius: 4px !important; } .c_radi_6 { border-radius: 6px !important; } .c_radi_8 { border-radius: 8px !important; } .c_radi_12 { border-radius: 12px !important; } .c_radi_15 { border-radius: 15px !important; } .c_radi_30 { border-radius: 30px !important; } /*字体变化:加粗,斜体,下划线*/ .c_font_bold { font-weight: bold !important; } .c_font_italic { font-style: italic !important; } .c_text_ul { text-decoration: underline !important; } /*文本字体大小*/ .c_font_14 { font-size: 14px !important; } .c_font_16 { font-size: 16px !important; } .c_font_28 { font-size: 28px !important; } ._font_30 { font-size: 30px !important; } .c_font_36 { font-size: 36px !important; } .c_font_48 { font-size: 48px !important; } /*文本水平对齐方式*/ .c_text_right { text-align: right !important; } .c_text_left { text-align: left !important; } .c_text_center { text-align: center !important; } /*文本颜色*/ .c_text_red { color: #FF0033 !important; } .c_text_red_p { color: #CC3333 !important; } .c_text_red_m { color: #FFCCCC !important; } .c_text_orange { color: #FF6600 !important; } .c_text_orange_p { color: #CC6600 !important; } .c_text_orange_m { color: #FFCC99 !important; } .c_text_yellow { color: #FFE800 !important; } .c_text_yellow_p { color: #BBBB00 !important; } .c_text_yellow_m { color: #FFFFCC !important; } .c_text_green { color: #009300 !important; } .c_text_green_p { color: #006633 !important; } .c_text_green_m { color: #99CC99 !important; } .c_text_blue { color: #0000FF !important; } .c_text_blue_p { color: #0202c5 !important; } .c_text_blue_m { color: #8e8eff !important; } .c_text_violet { color: #884898 !important; } .c_text_violet_p { color: #6e0f86 !important; } .c_text_violet_m { color: #976aa2 !important; } .c_text_gray { color: #666 !important; } .c_text_gray_p { color: #393D49 !important; } .c_text_gray_m { color: #C4C4C4 !important; } .c_text_white { color: white !important; } /*背景色*/ .c_bg_red { background-color: #FF0033 !important; } .c_bg_red_p { background-color: #CC3333 !important; } .c_bg_red_m { background-color: #FFCCCC !important; } .c_bg_orange { background-color: #FF6600 !important; } .c_bg_orange_p { background-color: #CC6600 !important; } .c_bg_orange_m { background-color: #FFCC99 !important; } .c_bg_yellow { background-color: #FFE800 !important; } .c_bg_yellow_p { background-color: #BBBB00 !important; } .c_bg_yellow_m { background-color: #FFFFCC !important; } .c_bg_green { background-color: #009300 !important; } .c_bg_green_p { background-color: #006633 !important; } .c_bg_green_m { background-color: #99CC99 !important; } .c_bg_blue { background-color: #1E9FFF !important; } .c_bg_blue_p { background-color: #006699 !important; } .c_bg_blue_m { background-color: #99CCFF !important; } .c_bg_violet { background-color: #884898 !important; } .c_bg_violet_p { background-color: #6e0f86 !important; } .c_bg_violet_m { background-color: #976aa2 !important; } .c_bg_gray { background-color: #666 !important; } .c_bg_gray_p { background-color: #393D49 !important; } .c_bg_gray_m { background-color: #C4C4C4 !important; } .c_bg_white { background-color: white !important; } /*边框颜色*/ /*元素边框颜色*/ /*.c_bord_gray { border: 1px solid #cccccc !important; } .c_bord_green { border: 1px solid rgb(36, 190, 110) !important; }*/ .c_bord_red { border: 1px solid #FF0033 !important; } .c_bord_red_p { border: 1px solid #CC3333 !important; } .c_bord_red_m { border: 1px solid #FFCCCC !important; } .c_bord_orange { border: 1px solid #FF6600 !important; } .c_bord_orange_p { border: 1px solid #CC6600 !important; } .c_bord_orange_m { border: 1px solid #FFCC99 !important; } .c_bord_yellow { border: 1px solid #FFE800 !important; } .c_bord_yellow_p { border: 1px solid #BBBB00 !important; } .c_bord_yellow_m { border: 1px solid #FFFFCC !important; } .c_bord_green { border: 1px solid #009300 !important; } .c_bord_green_p { border: 1px solid #006633 !important; } .c_bord_green_m { border: 1px solid #99CC99 !important; } .c_bord_blue { border: 1px solid #1E9FFF !important; } .c_bord_blue_p { border: 1px solid #006699 !important; } .c_bord_blue_m { border: 1px solid #99CCFF !important; } .c_bord_violet { border: 1px solid #884898 !important; } .c_bord_violet_p { border: 1px solid #6e0f86 !important; } .c_bord_violet_m { border: 1px solid #976aa2 !important; } .c_bord_gray { border: 1px solid #666 !important; } .c_bord_gray_p { border: 1px solid #393D49 !important; } .c_bord_gray_m { border: 1px solid #C4C4C4 !important; } .c_bord_white { border: 1px solid white !important; } /*文字标签*/ .c_h1 { font-size: 30px !important; } /*元素内边距*/ .c_padd_t_2, .c_padd_t_2_all *, .c_padd_t_b_2, .c_padd_t_b_2_all *, .c_padd_2, .c_padd_2_all * { padding-top: 2px !important; } .c_padd_b_2, .c_padd_b_2_all *, .c_padd_t_b_2, .c_padd_t_b_2_all *, .c_padd_2, .c_padd_2_all * { padding-bottom: 2px !important; } .c_padd_l_2, .c_padd_l_2_all *, .c_padd_l_r_2, .c_padd_l_r_2_all *, .c_padd_2, .c_padd_2_all * { padding-left: 2px !important; } .c_padd_r_2, .c_padd_r_2_all *, .c_padd_l_r_2, .c_padd_l_r_2_all *, .c_padd_2, .c_padd_2_all * { padding-right: 2px !important; } .c_padd_t_4, .c_padd_t_4_all *, .c_padd_t_b_4, .c_padd_t_b_4_all *, .c_padd_4, .c_padd_4_all * { padding-top: 4px !important; } .c_padd_b_4, .c_padd_t_b_4, .c_padd_4, .c_padd_b_4_all *, .c_padd_t_b_4_all *, .c_padd_4_all * { padding-bottom: 4px !important; } .c_padd_l_4, .c_padd_l_r_4, .c_padd_4, .c_padd_l_4_all *, .c_padd_l_r_4_all *, .c_padd_4_all * { padding-left: 4px !important; } .c_padd_r_4, .c_padd_l_r_4, .c_padd_4, .c_padd_r_4_all *, .c_padd_l_r_4_all *, .c_padd_4_all * { padding-right: 4px !important; } .c_padd_t_6, .c_padd_t_b_6, .c_padd_6, .c_padd_t_6_all *, .c_padd_t_b_6_all *, .c_padd_6_all * { padding-top: 6px !important; } .c_padd_b_6, .c_padd_t_b_6, .c_padd_6, .c_padd_b_6_all *, .c_padd_t_b_6_all *, .c_padd_6_all * { padding-bottom: 6px !important; } .c_padd_l_6, .c_padd_l_r_6, .c_padd_6, .c_padd_l_6_all *, .c_padd_l_r_6_all *, .c_padd_6_all * { padding-left: 6px !important; } .c_padd_r_6, .c_padd_l_r_6, .c_padd_6, .c_padd_r_6_all *, .c_padd_l_r_6_all *, .c_padd_6_all * { padding-right: 6px !important; } .c_padd_t_8, .c_padd_t_b_8, .c_padd_8, .c_padd_t_8_all *, .c_padd_t_b_8_all *, .c_padd_8_all * { padding-top: 8px !important; } .c_padd_b_8, .c_padd_t_b_8, .c_padd_8, .c_padd_b_8_all *, .c_padd_t_b_8_all *, .c_padd_8_all * { padding-bottom: 8px !important; } .c_padd_l_8, .c_padd_l_r_8, .c_padd_8, .c_padd_l_8_all *, .c_padd_l_r_8_all *, .c_padd_8_all * { padding-left: 8px !important; } .c_padd_r_8, .c_padd_l_r_8, .c_padd_8, .c_padd_r_8_all *, .c_padd_l_r_8_all *, .c_padd_8_all * { padding-right: 8px !important; } .c_padd_t_10, .c_padd_t_b_10, .c_padd_10, .c_padd_t_10_all *, .c_padd_t_b_10_all *, .c_padd_10_all * { padding-top: 10px !important; } .c_padd_b_10, .c_padd_t_b_10, .c_padd_10, .c_padd_b_10_all *, .c_padd_t_b_10_all *, .c_padd_10_all * { padding-bottom: 10px !important; } .c_padd_l_10, .c_padd_l_r_10, .c_padd_10, .c_padd_l_10_all *, .c_padd_l_r_10_all *, .c_padd_10_all * { padding-left: 10px !important; } .c_padd_r_10, .c_padd_l_r_10, .c_padd_10, .c_padd_r_10_all *, .c_padd_l_r_10_all *, .c_padd_10_all * { padding-right: 10px !important; } .c_padd_t_20, .c_padd_t_b_20, .c_padd_20, .c_padd_t_20_all *, .c_padd_t_b_20_all *, .c_padd_20_all * { padding-top: 20px !important; } .c_padd_b_20, .c_padd_t_b_20, .c_padd_20, .c_padd_b_20_all *, .c_padd_t_b_20_all *, .c_padd_20_all * { padding-bottom: 20px !important; } .c_padd_l_20, .c_padd_l_r_20, .c_padd_20, .c_padd_l_20_all *, .c_padd_l_r_20_all *, .c_padd_20_all * { padding-left: 20px !important; } .c_padd_r_20, .c_padd_l_r_20, .c_padd_20, .c_padd_r_20_all *, .c_padd_l_r_20_all *, .c_padd_20_all * { padding-right: 20px !important; } .c_padd_t_30, .c_padd_t_b_30, .c_padd_30, .c_padd_t_30_all *, .c_padd_t_b_30_all *, .c_padd_30_all * { padding-top: 30px !important; } .c_padd_b_30, .c_padd_t_b_30, .c_padd_30, .c_padd_b_30_all *, .c_padd_t_b_30_all *, .c_padd_30_all * { padding-bottom: 30px !important; } .c_padd_l_30, .c_padd_l_r_30, .c_padd_30, .c_padd_l_30_all *, .c_padd_l_r_30_all *, .c_padd_30_all * { padding-left: 30px !important; } .c_padd_r_30, .c_padd_l_r_30, .c_padd_30, .c_padd_r_30_all *, .c_padd_l_r_30_all *, .c_padd_30_all * { padding-right: 30px !important; } .c_padd_t_50, .c_padd_t_b_50, .c_padd_50 { padding-top: 50px !important; } .c_padd_b_50, .c_padd_t_b_50, .c_padd_50 { padding-bottom: 50px !important; } .c_padd_l_50, .c_padd_l_r_50, .c_padd_50 { padding-left: 50px !important; } .c_padd_r_50, .c_padd_l_r_50, .c_padd_50 { padding-right: 50px !important; } .c_padd_2_8 { padding: 2px 8px !important; } .c_padd_4_8 { padding: 4px 8px !important; } .c_padd_6_8 { padding: 6px 8px !important; } .c_padd_2_10 { padding: 2px 10px !important; } .c_padd_4_10 { padding: 4px 10px !important; } .c_padd_6_10 { padding: 6px 10px !important; } .c_padd_8_10 { padding: 8px 10px !important; } .c_padd_2_16 { padding: 2px 16px !important; } .c_padd_4_16 { padding: 4px 16px !important; } .c_padd_6_16 { padding: 6px 16px !important; } .c_padd_8_16 { padding: 8px 16px !important; } /*元素外边距*/ .c_marg_l_2, .c_marg_l_r_2, .c_marg_2, .c_marg_l_2_all *, .c_marg_l_r_2_all *, .c_marg_2_all * { margin-left: 2px !important; } .c_marg_r_2, .c_marg_l_r_2, .c_marg_2, .c_marg_r_2_all *, .c_marg_l_r_2_all *, .c_marg_2_all * { margin-right: 2px !important; } .c_marg_t_2, .c_marg_t_b_2, .c_marg_2, .c_marg_t_2_all *, .c_marg_t_b_2_all *, .c_marg_2_all * { margin-top: 2px !important; } .c_marg_b_2, .c_marg_t_b_2, .c_marg_2, .c_marg_b_2_all *, .c_marg_t_b_2_all *, .c_marg_2_all * { margin-bottom: 2px !important; } .c_marg_l_4, .c_marg_l_r_4, .c_marg_4, .c_marg_l_4_all *, .c_marg_l_r_4_all *, .c_marg_4_all * { margin-left: 4px !important; } .c_marg_r_4, .c_marg_l_r_4, .c_marg_4, .c_marg_r_4_all *, .c_marg_l_r_4_all *, .c_marg_4_all * { margin-right: 4px !important; } .c_marg_t_4, .c_marg_t_b_4, .c_marg_4, .c_marg_t_4_all *, .c_marg_t_b_4_all *, .c_marg_4_all * { margin-top: 4px !important; } .c_marg_b_4, .c_marg_t_b_4, .c_marg_4, .c_marg_b_4_all *, .c_marg_t_b_4_all *, .c_marg_4_all * { margin-bottom: 4px !important; } .c_marg_l_6, .c_marg_l_r_6, .c_marg_6, .c_marg_l_6_all *, .c_marg_l_r_6_all *, .c_marg_6_all * { margin-left: 6px !important; } .c_marg_r_6, .c_marg_l_r_6, .c_marg_6, .c_marg_r_6_all *, .c_marg_l_r_6_all *, .c_marg_6_all * { margin-right: 6px !important; } .c_marg_t_6, .c_marg_t_b_6, .c_marg_6, .c_marg_t_6_all *, .c_marg_t_b_6_all *, .c_marg_6_all * { margin-top: 6px !important; } .c_marg_b_6, .c_marg_t_b_6, .c_marg_6, .c_marg_b_6_all *, .c_marg_t_b_6_all *, .c_marg_6_all * { margin-bottom: 6px !important; } .c_marg_l_8, .c_marg_l_r_8, .c_marg_8, .c_marg_l_8_all *, .c_marg_l_r_8_all *, .c_marg_8_all * { margin-left: 8px !important; } .c_marg_r_8, .c_marg_l_r_8, .c_marg_8, .c_marg_r_8_all *, .c_marg_l_r_8_all *, .c_marg_8_all * { margin-right: 8px !important; } .c_marg_t_8, .c_marg_t_b_8, .c_marg_8, .c_marg_t_8_all *, .c_marg_t_b_8_all *, .c_marg_8_all * { margin-top: 8px !important; } .c_marg_b_8, .c_marg_t_b_8, .c_marg_8, .c_marg_b_8_all *, .c_marg_t_b_8_all *, .c_marg_8_all * { margin-bottom: 8px !important; } .c_marg_l_10, .c_marg_l_r_10, .c_marg_10, .c_marg_l_10_all *, .c_marg_l_r_10_all *, .c_marg_10_all * { margin-left: 10px !important; } .c_marg_r_10, .c_marg_l_r_10, .c_marg_10, .c_marg_r_10_all *, .c_marg_l_r_10_all *, .c_marg_10_all * { margin-right: 10px !important; } .c_marg_t_10, .c_marg_t_b_10, .c_marg_10, .c_marg_t_10_all *, .c_marg_t_b_10_all *, .c_marg_10_all * { margin-top: 10px !important; } .c_marg_b_10, .c_marg_t_b_10, .c_marg_10, .c_marg_b_10_all *, .c_marg_t_b_10_all *, .c_marg_10_all * { margin-bottom: 10px !important; } .c_marg_l_20, .c_marg_l_r_20, .c_marg_20, .c_marg_l_20_all *, .c_marg_l_r_20_all *, .c_marg_20_all * { margin-left: 20px !important; } .c_marg_r_20, .c_marg_l_r_20, .c_marg_20, .c_marg_r_20_all *, .c_marg_l_r_20_all *, .c_marg_20_all * { margin-right: 20px !important; } .c_marg_t_20, .c_marg_t_b_20, .c_marg_20, .c_marg_t_20_all *, .c_marg_t_b_20_all *, .c_marg_20_all * { margin-top: 20px !important; } .c_marg_b_20, .c_marg_t_b_20, .c_marg_20, .c_marg_b_20_all *, .c_marg_t_b_20_all *, .c_marg_20_all * { margin-bottom: 20px !important; } .c_marg_l_30, .c_marg_l_r_30, .c_marg_30 { margin-left: 30px !important; } .c_marg_r_30, .c_marg_l_r_30, .c_marg_30 { margin-right: 30px !important; } .c_marg_t_30, .c_marg_t_b_30, .c_marg_30 { margin-top: 30px !important; } .c_marg_b_30, .c_marg_t_b_30, .c_marg_30 { margin-bottom: 30px !important; } /*元素行高*/ .c_line_h_1p5 { line-height: 1.5 !important; } .c_line_h_2 { line-height: 2 !important; } .c_line_h_2p5 { line-height: 2.5 !important; } .c_line_h_3 { line-height: 3 !important; } /*元素浮动清除*/ .c_clea_l { clear: left !important; } .c_clea_r { clear: right !important; } /*元素浮动*/ .c_left { float: left !important; } .c_right { float: right !important; } /*元素的垂直对齐方式*/ .c_vert_midd { vertical-align: middle !important; } .c_vert_bott { vertical-align: bottom !important; } .c_vert_top { vertical-align: top !important; } /*内容溢出元素框样式*/ .c_over_auto { overflow: auto; } .c_over_y_auto { overflow-x: hidden; overflow-y: auto; } .c_over_x_auto { overflow-x: auto; overflow-y: hidden; } .c_over_hidden { overflow: hidden; } .c_text_over_elli { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*.c_over_y_hidden { overflow-y: hidden; } .c_over_x_hidden { overflow-x: hidden; }*/ /*列表项标记的类型*/ .c_ul_disc li { list-style-type: disc !important; } .c_ul_deci li { list-style-type: decimal !important; } .c_ul_squa li { list-style-type: square !important; } .c_ul_lower_a li { list-style-type: lower-alpha !important; } .c_ul_upper_a li { list-style-type: upper-alpha !important; } .c_ul_list_item li { display: list-item !important; } /*元素高度百分比*/ .c_h_100p { height: 100%; } /*a连接*/ .c_a_yellow a { color: #d2c4a0 !important; } .c_a_yellow a:hover, .c_a_yellow a:focus { text-decoration: underline; } /*------------以下为组件样式-----------------------------------------------------------------------------------------------*/ /*按钮内边距*/ .cc_btn { padding: 8px 10px; } .cc_btn_m { padding: 6px 10px; } .cc_btn_m2 { padding: 4px 10px; } /*按钮公共样式*/ .cc_btn, .cc_btn_m, .cc_btn_m2 { border: none; cursor: pointer; background-color: white; display: inline-block; } .cc_btn:hover, .cc_btn_m:hover, .cc_btn_m2:hover { opacity: .8; -webkit-filter: contrast(110%); filter: contrast(110%); } .cc_btn:active, .cc_btn_m:active, .cc_btn_m2:active { opacity: .8; -webkit-filter: contrast(110%); filter: contrast(110%); } /*按钮背景色与边框色*/ .cc_btn_green { border: 1px solid rgb(36, 190, 110); background-color: rgb(36, 190, 110); } .cc_btn_orange { border: 1px solid rgb(255, 122, 0); background-color: rgb(255, 122, 0); } .cc_btn_blue { border: 1px solid rgb(0, 173, 255); background-color: rgb(0, 173, 255); } /*按钮鼠标悬停样式*/ .cc_btn_green, .cc_btn_green *, .cc_btn_green:hover, .cc_btn_orange, .cc_btn_orange *, .cc_btn_orange:hover, .cc_btn_blue, .cc_btn_blue *, .cc_btn_blue:hover { color: white !important; } /*标注样式*/ .cc_label { display: block; padding: 8px; background-color: #F7F7F7; border-left: 2px solid #B2B2B2; } .cc_label_must { border-left: 2px solid #ff6b24 !important; }